<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/combobox/combobox.js" ></script>

<div id="comboboxDemo">
    <div title='API' tabid='tab1'>
       <div>
				<h2>&lt;input type="text" name="xxx" id="xxx" class="init ccay-combobox" service="xxx" /></h2>
				
				<h3 style="padding-top:10px">作用：生成下拉框</h3>
				<h3 style="color:red;padding-top:10px;padding-bottom:10px">注意：该标签在进入页面时，自动初始化，若由js生成该标签，应使用$.fn.ccayCombobox(conf)来初始化</h3>
				
				<form id="param" class="init ccay-form">			
					<div class="ccay-form-body ccay-form-custom">
						<ul>	
						    <li class="ccay-form-row">
						        <samp><h3>参数</h3></samp>
								<span class="ccay-form-input">
									<h3>描述</h3>
								</span>
							</li>														
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="type"></samp>							    
								<span class="ccay-form-input">必须指定type="text" </span>
							</li>
							
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="dataPopup"></samp>							    
								<span class="ccay-form-input">{Boolean}点击文本框手动输入弹出下拉数据 </span>
							</li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="readOnly"></samp>							    
								<span class="ccay-form-input">{Boolean}点击文本框弹出下拉数据 </span>
							</li>
							
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="multiDisabled"></samp>							    
								<span class="ccay-form-input">{Boolean}多选支持手动输入联想 </span>
							</li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="name"></samp>							    
								<span class="ccay-form-input">{String类型}<p>指定该数据绑定的VO字段</span>
							</li>
 							<li class="ccay-form-row">
 							    <samp class="i18n" i18nKey="defaultSelect"></samp>
 							    <span class="ccay-form-input">
										{Boolean}为false 时不默认选中第一条
								</span>
							</li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="class"></samp>							    
								<span class="ccay-form-input">必须指定class="init ccay-combobox"</span>
							</li>
 
                            <li class="ccay-form-row">
						        <samp class="i18n" i18nKey="service"></samp>
						        <span class='ccay-form-input'>
						            <div class="ccay-form-body">
									  <ul></ul>
									</div>  
							        <div class="ccay-form-custom">
									  <ul>
									      <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="类型"></samp>
										 	<span class='ccay-form-input'>说明</span>
										  </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="ENUM项数据"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>service="ENUM:WeekEnum" 
										 	     <p>指定ENUM的类，如“WeekEnum”
										 	     <p>返回value为该类下的项的项编码，下拉框显示项的显示名称				 	    
										 	</span>
										 </li>
										 <li class="ccay-form-row ccay-form-whole">
										 	<samp class="i18n" i18nKey="ENUM项数据,中英文区分"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>service="ENUM:WeekEnum" 
										 	     <p>返回value为该类下的当前语言的项的项编码，下拉框显示项的显示名称			 	    
										 	</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="数据来源：同步方法"></samp>
										 	<span class='ccay-form-input'>
											 	service="FN:function A(){...}" 方法A返回json数据
											 	<p>还要指定：
											 	<p>valueField="XXX"   文本框的value域
											 	<p>displayField="XXX"   文本框和下拉框的显示域
										 	</span>										 	
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="数据来源：异步方法"></samp>
										 	<span class='ccay-form-input'>
										 	   service="SYNC:function A(){...}" 方法A返回json数据
										 	   <p>还要指定：
										 	   <p>valueField="XXX"   文本框的value域
										 	   <p>displayField="XXX"   文本框和下拉框的显示域	
										 	 </span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="数据来源：REST"></samp>
										 	<span class='ccay-form-input'>
										 	   service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN"，
										 	   <p>REST的URL为相应方法，返回VO的list对象
										 	   <p>还要指定：
										 	   <p>valueField="XXX"   文本框的value域
										 	   <p>displayField="XXX"   文本框和下拉框的显示域	
										 	</span>
										 </li>															 										 
									 </ul>
							       </div>
						      </span>
					     </li>																															
				    </ul>
			   </div>
		    </form>
        		
			</div>
			
			<!---------------------------------------------------  -->
			<div>
				<h3 style="padding-top:10px">manager 方法：</h3><br>
				<form id="param" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">
						<ul>
							<li class="ccay-form-row">
								<samp style="width: 180px;"><h3>方法</h3></samp>
								<span class="ccay-form-input">
									<h3>描述</h3>
								</span>
							</li>
							<li class="ccay-form-row">
								<samp style="width: 180px;" class="i18n" i18nKey="setValue(value, text)"></samp>
								<span class="ccay-form-input">设置值</span>							
							</li>
							<li class="ccay-form-row">
								<samp style="width: 180px;" class="i18n" i18nKey="reBind(ajax, datas, defalutValue)"></samp>
								<span class="ccay-form-input">重新绑定数据</span>
							</li>
							<li class="ccay-form-row">
								<samp style="width: 180px;" class="i18n" i18nKey="getSelector()"></samp>
								<span class="ccay-form-input">获取下拉的属性</span>
							</li>
							<li class="ccay-form-row">
								<samp style="width: 180px;" class="i18n" i18nKey="disabled(enabled)"></samp>
								<span class="ccay-form-input">设置表格是否可用</span>
							</li>
							<li class="ccay-form-row">
								<samp style="width: 180px;" class="i18n" i18nKey="lock(input,locked)"></samp>
								<span class="ccay-form-input">锁定下拉不可用</span>
							</li>
							<li class="ccay-form-row">
								<samp style="width: 180px;" class="i18n" i18nKey="valid()"></samp>
								<span class="ccay-form-input">设置验证</span>
							</li>
							<li class="ccay-form-row">
								<samp style="width: 180px;" class="i18n" i18nKey="resetLazyLoad()"></samp>
								<span class="ccay-form-input">延迟加载</span>
							</li>
						</ul>
					</div>
				</form>
			
			</div>
			<!---------------------------------------------------  -->
			<h3 style="padding-top:20px;color:red;"></h3>	    
</div>	
    <div title="ENUM" tabid="lookup">
       <form class="init ccay-form">
	    <h4><span>实例1：数据来源ENUM的类的项数据</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				  <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" id="comboT1" class="init ccay-combobox" service="ENUM:WeekEnum" /></li>
				  </ul> 
				    <div class="clear"></div>
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html1'>&lt;input type="text" id="comboT1" class="init ccay-combobox" service="ENUM:WeekEnum" /></pre>
				</div>
			</div>
			
		    <h4><span>实例2：数据来源ENUM的类的项数据，当添加historySupport=“false”的时候就不支持历史记录</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				  <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" id="comboT12" class="init ccay-combobox" service="ENUM:WeekEnum" historySupport="false" /></li>
				  </ul> 
				    <div class="clear"></div>
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html12'>&lt;input type="text" id="comboT12" class="init ccay-combobox" service="ENUM:WeekEnum" historySupport = "false" /></pre>
				</div>
			</div>
		 </form>  
    </div>
    
 <!-- 添加demo  -->
 
  <div title="ENUM 点击文本框弹出下拉数据" tabid="data">
       <form class="init ccay-form">
	    <h4><span>实例1：lookup  点击文本框手动输入弹出下拉数据</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				  <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" id="data1" class="init ccay-combobox" service="ENUM:WeekEnum" conf="{dataPopup:true}" /></li>
				  </ul> 
				    <div class="clear"></div>
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html11'>&lt;input type="text" id="data1" class="init ccay-combobox" service="ENUM:WeekEnum" conf="{dataPopup:true}" /></pre>
				</div>
			</div>
			
		<h4><span>实例2：lookup  点击文本框弹出下拉数据</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				    <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" id="data2" class="init ccay-combobox" service="ENUM:WeekEnum" conf="readOnly:true" /></li>
				    </ul>
				    <div class="clear"></div>	    
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html22'>&lt;input type="text" id="data2" class="init ccay-combobox" service="ENUM:WeekEnum" conf="readOnly:true" /></pre>
				</div>
		   </div>
		   
		 </form>  
    </div>
 
 
 
 
 
 <!-- 添加demo  -->
    <div title="FN&SYNC" tabid='fn'>
      <form class="init ccay-form">
       <h4><span>实例1：数据来源同步方法</span></h4>
			<div style='padding-left:30px'>
			  <div class='demo'>
			    <ul class='ccay-horRow'>
			    <li class="ccay-horRow-item"><input type="text" id="comboT3" class="init ccay-combobox" service="FN:Ccay.example.ui.combobox.getUser" valueField="id" displayField="text"  /></li>	
			    </ul>
			    <div class="clear"></div>
			  </div>
			  <h3>html Code</h3>
			  <div class="codeArea">			    
				<pre id='html3'>&lt;input type="text" id="comboT3" class="init ccay-combobox" 
	service="FN:Ccay.example.ui.combobox.getUser" valueField="id" displayField="text"  /></pre>
			</div>
			<h3>js Code</h3>
			<div class="codeArea">
				<pre id='js3'>
page.getUser=function(){
		return [{ text: '刘二', id: '0' },{ text: '张三', id: '1' },
		        { text: '李四', id: '2' },{ text: '赵武', id: '44' }];
	};</pre>
			</div>
如果您想使用同步，而数据又是动态获取的可以使用如下方法：
  			  <div class='demo'>
			    <ul class='ccay-horRow'>
			    <li class="ccay-horRow-item"><input type="text" id="comboT31" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  /></li>	
			    </ul>
			    <div class="clear"></div>
			  </div>
			  <h3>js Code</h3>
			<div class="codeArea">
				<pre id='js31'>
&lt;input type="text" id="comboT31" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  /&gt;
				</pre>
			</div>
			<!-- <div>
				<a class="try" onclick="Ccay.example.ui.combobox.openTry('',$('#html3').text())">亲自试一试</a>
			</div>	 -->
			</div>
	   <h4><span>实例2：数据来源异步方法</span></h4>
			<div style='padding-left:30px'>
			<div class='demo'>		   		
			    <input type="text" id="comboT4" class="init ccay-combobox"  service="SYNC:Ccay.example.ui.combobox.getSyncData" valueField="value" displayField="displayValue"/>
                <div class="clear"></div>  	    
			</div>
			<h3>html Code</h3>
			<div class="codeArea">
				<pre id='html4'>&lt;input type="text" id="comboT4" class="init ccay-combobox" service="SYNC:Ccay.example.ui.combobox.getSyncData" valueField="value" displayField="displayValue"  /></pre>
			</div>
			<h3>js Code</h3>
			<div class="codeArea">
				<pre id='js4'>
page.getSyncData=function(fn){
var servicePath="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN";
Ccay.doGet(servicePath,"",fn);
};             </pre>
			</div>			
			<!-- <div>
				<a class="try" onclick="Ccay.example.ui.combobox.openTry('',$('#html4').text())">亲自试一试</a>
			</div>	 -->
			</div>
      </form>
    </div>
    <div title="REST" tabid="rest">
      <form class="init ccay-form">
       <h4><span>实例1：数据来源REST</span></h4>
		     <div style='padding-left:30px'>
			  <div class='demo'>
			    <ul class='ccay-horRow'>
			    <li class="ccay-horRow-item"><input type="text" id="comboT5" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  /></li>	
			    </ul>
			    <div class="clear"></div>
			  </div>
			  <h3>html Code</h3>
			  <div class="codeArea">
				<pre id='html5'>&lt;input type="text" id="comboT5" class="init ccay-combobox" 
     service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" 
     valueField="value" 
     displayField="displayValue"  /></pre>
			  </div>
				<!-- <div>
					<a class="try" onclick="Ccay.example.ui.combobox.openTry('',$('#html5').text())">亲自试一试</a>
				</div>	 -->			
			  </div>
			  
			 <!-- --------------------------------- --> 
			<h4><span>实例2：默认数据</span></h4>
				 <div style='padding-left:30px'>
			  <div class='demo'>
			    <ul class='ccay-horRow'>
			    <li class="ccay-horRow-item"><input type="text" id="comboT56" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue" conf="{emptyText:true,addEmptyOption:' ------------All------------'}"  /></li>	
			    </ul>
			    <div class="clear"></div>
			  </div>
			  <h3>html Code</h3>
				  <div class="codeArea">
					<pre id='html12'>&lt;input type="text" id="comboT56" class="init ccay-combobox" 
	     service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" 
	     valueField="value" 
	     displayField="displayValue" <font  style="color:red"> conf="{emptyText:true,addEmptyOption:' ------------All------------'}" </font> /></pre>
				  </div>	
			  </div>
			
			
			

			 <!-- --------------------------------- --> 
			  
     </form> 
    </div>
    <div title="级联" >
      <h4><span>实例1：单父级级联</span></h4>
			<div style='padding-left:30px'>
				<form class="init ccay-form" id="connectorForm">
					<div class='demo'>
					    <ul class='ccay-horRow'>
						    <li class="ccay-horRow-item"><input type="text" id="connector1" name="connector1" class="init ccay-combobox" service="REST:services/ccay/demo/address/listProvinces/page/80/1" valueField="provinceId" displayField="provinceName" /></li>
						    <li class="ccay-horRow-item"><input type="text" id="connector2" name="connector2" multi=true class="init ccay-combobox" service="REST:services/ccay/demo/address/listCities/page/80/1?provinceId={0}" connector="#connector1"  valueField="cityId" displayField="cityName" /></li>
					    </ul> 
					</div>
					<br><br>
					<div>
						<span class="ccay-button" onclick="Ccay.example.ui.combobox.afterValid()">
					     	<a class="ccay-icon confirm"></a>
					     	<label>查看结果</label>
					     </span>
					</div>
				</form>
				<div class="clear"></div>
					 
				<h3 style="padding-top:10px;">示例说明：一级为省，二级市。</h3>
				<h3>使用方法：html标签必须指定connector="#id"，其中id为上级的id</h3> 
				
				<h3 style="padding-top:20px;">html Code</h3>
				<div class="codeArea">
					<pre id='html6'>&lt;!-- 第一级 --><p>&lt;input type="text" id="connector1" class="init ccay-combobox" service="REST:services/ccay/demo/address/listProvinces/page/80/1" valueField="provinceId" displayField="provinceName" />
					<p>&lt;!-- 第二级 -->
					<p>&lt;input type="text" id="connector2" class="init ccay-combobox" service="REST:services/ccay/demo/address/listCities/page/80/1?provinceId={0}" connector="#connector1"  valueField="cityId" displayField="cityName" /></pre>
				</div>
				<!-- <div>
					<a class="try" onclick="Ccay.example.ui.combobox.openTry('',$('#html6').text())">亲自试一试</a>
				</div>	 -->
			</div>	
	  	 <h4><span>实例2：多父级级联</span></h4>
			<div style='padding-left:30px'>
				<form class="init ccay-form">
				<div class='demo'>
				    <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><span>父级1：</span></li>
				    <li class="ccay-horRow-item"><input type="text" id="connector61"  /></li>
				    <li class="ccay-horRow-item"><span>父级2：</span></li>
				    <li class="ccay-horRow-item"><input type="text" id="connector62"  /></li>
				    <li class="ccay-horRow-item"><span>由父级1和2得到：</span></li>
				    <li class="ccay-horRow-item"><input type="text" id="target"  /></li>
				    </ul> 
				</div>
				</form>
				<div class="clear"></div>
			    <h3 style="padding-top:20px;">示例说明：由多级父级来进行级联，<font color="red">父级可以是其他的输入控件</font>。</h3>
			    <h3>关键参数：$.fn.dropdown(options)中的options的ajax和connector设置，具体参考示例代码。</h3>
				
				<h3 style="padding-top:20px;">html Code</h3>
				<div class="codeArea">
					<pre id='html62'>&lt;!-- 父级1 --><p>&lt;input type="text" id="connector61"  />
						<p>&lt;!-- 父级2 -->
						<p>&lt;input type="text" id="connector62"  />
						<p>&lt;!-- 有父级1和2得到 -->
						<p>&lt;input type="text" id="target"  />
					</pre>
				</div>
				<h3>js Code</h3>
				<div class="codeArea">
					<pre id='js62'>
  	   var datas = [
                  { value: 'zh_CN', text: '中文' },
                  { value: 'en_US', text: '英文' }
        ];
	
	     //初始化第一个下拉框
	     $('#connector61').dropdown({
	    	ajax:{url:"services/manage/enums/findAllEnumType"},
	    	valueField:"key",
	    	displayField:"value"
	     });
	     //初始化第二个下拉框
	     $('#connector62').dropdown({}, datas);
	     //初始化第三个下拉框
	     $('#target').dropdown({valueField:"value",displayField:"displayValue",
	    	 lazyload:true,
	    	 initInput:false,
	    	 ajax:{
	    	 	<font color="red">//查询数据的url，只需要传{0}，这个参数会根据connector设置的关键参数进行填充处理
	    	 	//如这个示例，传进来的{0}为"type=XXX&language=YYY"</font>
	    		url:"services/ccay/enums/itemquery/list/?{0}"
	     	 },
	     	 <font color="red">//设置父级，及该父级是哪个字段的参数，传出来的参数为"type=XXX&language=YYY"
	     	 //XXX为"#connector61"这个的value，YYY为"#connector62"这个的vlaue
	     	 //paramName为参数关键字</font>
	     	 connector:[
				{target:"#connector61",paramName:"type",defaultValue:""},
				{target:"#connector62",paramName:"language",defaultValue:"zh_CN"}
			 ]
	     });
					</pre>
				</div>
			</div>
		 <h4><span>实例3：使用dropdown初始化下拉框</span></h4>
			<div style='padding-left:30px'>
			<form class="init ccay-form">
				<div class='demo'>
				    <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><span>父级：</span></li>
				    <li class="ccay-horRow-item"><input type="text" id="drop31"  /></li>
				    <li class="ccay-horRow-item"><span>子级：</span></li>
				    <li class="ccay-horRow-item"><input type="text" id="drop32"  /></li>
				    </ul> 
				</div>
			</form>	
				<div class="clear"></div>
			    <h3 style="padding-top:20px;">示例说明：由dropdown初始化下拉框，并设置级联，父级选择值后重新给子级设置请求url。</h3>
			    <h3>关键设置1：$.fn.dropdown(options)中的options的ajax和fnSelected设置，具体参考示例代码。</h3>
			    <h3>关键设置2：$.fn.manager().reBind(ajax, datas)。</h3>
				
				<h3 style="padding-top:20px;">html Code</h3>
				<div class="codeArea">
					<pre id='html_62'>
&lt;!-- 父级 --><p>&lt;input type="text" id="drop_31"  />
<p>&lt;!-- 子级 -->
<p>&lt;input type="text" id="drop_32"  /></pre>
				</div>
				<h3>js Code</h3>
				<div class="codeArea">
					<pre id='js_62'>
//<font color="red">父级</font> 
		$('#drop31').dropdown({
			valueField:"key",
			displayField:"value",
	    	ajax:{url:"services/manage/enums/findAllEnumType"},
		 	//<font color="red"> 选择之后的事件</font> 
		 	fnSelected:function(value, text,oldValue, item,selector,data){
		 		var type = "";
		 		if(data && data.key){
		 			type = data.key;
		 		} 
		 		// <font color="red">!!!必须先置空，再rebind</font> 
		 		$('#drop32').manager().setValue("");
		 		$('#drop32').manager().reBind({
		 			url:"services/ccay/enums/itemquery/list/"+type+"/zh_CN",
		 			fnSuccess:function(){
		 				//<font color="red"> rebind完成后的事件，比如可在此处设置值等</font> 
		 			}
		 		},null);
		 	}
    	  });
		
    	//<font color="red">子级</font>
		$('#drop32').dropdown({
			valueField:"value",
			displayField:"displayValue"
		},{});
					</pre>
				</div>
			</div>
    </div>
    <div title='取值 &设置值&多选&多选分隔符' tabid='tab2'>
        <form class="init ccay-form">
		<div>
			<h4><span>实例1：combobox 取值 和 设置值：$.fn.ccayGetValue()和$.fn.ccaySetValue(value),如：$('#comboT7').ccayGetValue()</span></h4>
		     <div style='padding-left:30px'>
		     <h3 style="color:red">注意：设置值时，要确保是combo中的数据，否则设置进去显示为空。</h3>
			<div class='demo'>
			    <ul class='ccay-horRow'>
			     <li class="ccay-horRow-item"><input type="text" id="comboT7" class="init ccay-combobox" service="ENUM:WeekEnum" /></li>	
			     <li class="ccay-horRow-item">
			     	<span class="ccay-button" onclick="alert($('#comboT7').ccayGetValue())">
				     	<a class="ccay-icon confirm"></a>
				     	<label>取值</label>
				     </span>
			     </li>
			     <li class="ccay-horRow-item">
			     	 <span class="ccay-button" onclick="$('#comboT7').ccaySetValue('3')">
				     	<a class="ccay-icon edit"></a>
				     	<label>设置值</label>
				     </span>
			     </li>
			    </ul>
			    <div class="clear"></div>
			</div>
			<h3>js Code</h3>
			<div class="codeArea">
				<pre id='js7'>//取值<p>$('#id').ccayGetValue();<p>//设置值<p>$('#id').ccaySetValue('3')</pre>
			</div>
			<!-- <div>
				<a class="try" onclick="Ccay.example.ui.combobox.openTry('',$('#html5').text())">亲自试一试</a>
			</div>	 -->			
			</div>
			<h4><span>实例2:多选 设置 mutil="true"</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				  <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" id="comboT8" class="init ccay-combobox" service="ENUM:WeekEnum" multi="true"/></li>
				  </ul> 
				    <div class="clear"></div>
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html1'>&lt;input type="text" id="comboT8" class="init ccay-combobox" service="ENUM:WeekEnum" multi="true"/></pre>
				</div>
			</div>
			<h4><span>实例3:多选分隔符 设置 conf = {multiSplit:'分隔符'}</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				  <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" id="comboT9" class="init ccay-combobox" service="ENUM:WeekEnum" multi="true" conf={multiSplit:'+'} /></li>
				  </ul> 
				    <div class="clear"></div>
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html1'>&lt;input type="text" id="comboT9" class="init ccay-combobox" service="ENUM:WeekEnum" multi="true" conf={multiSplit:'+'} /></pre>
				</div>
			</div>
			
			<h4><span>实例4:多选 设置 conf="{multiDisabled:true}  支持手动输入联想</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				  <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" id="asd" class="init ccay-combobox" service="ENUM:WeekEnum" multi="true" conf="{multiDisabled:true}"/></li>
				  </ul> 
				    <div class="clear"></div>
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html1'>&lt;input type="text" id="comboT8" class="init ccay-combobox" service="ENUM:WeekEnum" multi="true" conf="{multiDisabled:true} /></pre>
				</div>
			</div>
	   </div> 
	   </form>
    </div>	
    <div title="设置默认项" >
       <form class="init ccay-form">
	    <h4><span>实例1：设置conf={lazyload:false}，只有一项时选中，多项时不选中</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				  <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  conf={lazyload:false} /></li>
				  </ul> 
				    <div class="clear"></div>
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html1'>&lt;input type="text" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  conf={lazyload:false} /></pre>
				</div>
			</div>
		<h4><span>实例2：默认选中第一项, 设置conf={showfirstItem:true}</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				    <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item">设置默认不选中第一项:</li>
				    <li class="ccay-horRow-item"><input type="text" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  conf={showfirstItem:false} /></li>
				    <li class="ccay-horRow-item">设置默认选中第一项:</li>
				    <li class="ccay-horRow-item"><input type="text" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/en_US" valueField="value" displayField="displayValue"  conf={showfirstItem:true} /></li>
				    </ul>
				    <div class="clear"></div>	    
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre id='html2'>
&lt;input type="text" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  conf={showfirstItem:false} /><p>
&lt;input type="text" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/en_US" valueField="value" displayField="displayValue"  conf={showfirstItem:true} /></pre>
				</div>
		   </div>
		 </form>  
    </div>
    <div title="设置不校验" >
       <form class="init ccay-form">
	    <h4><span>设置conf="{valid:false}"，可任意输入，可下拉选择，控件不进行校验</span></h4>
			<div style='padding-left:30px'>
				<div class='demo'>
				  <ul class='ccay-horRow'>
				    <li class="ccay-horRow-item"><input type="text" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  conf="{valid:false}" /></li>
				  </ul> 
				</div>
				<h3>html Code</h3>
				<div class="codeArea">
					<pre>&lt;input type="text" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/WeekEnum/zh_CN" valueField="value" displayField="displayValue"  conf="{valid:false}" /></pre>
				</div>
			</div>
		 </form>  
    </div>
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
    <div title="FAQ">
      <form id="param" class="init ccay-form">
		
	    <div class="ccay-form-body ccay-form-custom">
		<ul>						
		    <li class="ccay-form-row">
		        <samp><h3>问题</h3></samp>
				<span class="ccay-form-input">
					<h3>解决方案</h3>
				</span>
			</li>
			<li class="ccay-form-row ccay-form-whole">
			    <samp class="i18n" i18nKey="1.为什么设置readonly属性后，下拉框不能使用？"></samp>							    
				<span class="ccay-form-input">
				设置readonly="readonly"时，禁用下拉功能编程普通的文本框，只能显示填充的数据。
				<p>可设置 添加属性 combo=“false” 则不可以手动输入，只能点击下拉来选择数据。
				</span>
			</li>
			<li class="ccay-form-row ccay-form-whole">
			    <samp class="i18n" i18nKey="2.html初始化下拉框时，如何设置其他属性的设置项？"></samp>							    
				<span class="ccay-form-input">
				通过设置html的属性：conf="{XXX:XXX}",如：设置不校验conf="{valid:false}",其他的设置同理。
				</span>
			</li>	
		</ul>
	</div>
  </form>						
</div>
</div>